import { View, ScrollView, Text } from '@tarojs/components'
import DoctorCard from './DoctorCard'

const DoctorList = ({ 
  allDoctors, 
  getDoctorsByCategory, 
  doctorFilterTags, 
  activeFilter, 
  onFilterChange, 
  onDoctorClick 
}) => {
  console.log('=== DoctorList 组件渲染 ===')
  console.log('DoctorList props:', { allDoctors, activeFilter, doctorFilterTags })
  console.log('allDoctors 类型:', typeof allDoctors)
  console.log('allDoctors 长度:', allDoctors?.length)
  console.log('allDoctors 数据:', allDoctors)
  
  const currentDoctors = getDoctorsByCategory ? getDoctorsByCategory(activeFilter) : []
  console.log(`当前分类 ${activeFilter} 的医生数量:`, currentDoctors.length)
  console.log('当前分类医生数据:', currentDoctors)

  // 检查是否有任何数据
  const hasAnyData = allDoctors && allDoctors.length > 0

  if (!hasAnyData) {
    return (
      <View className='empty-state'>
        <Text>暂无医生数据</Text>
      </View>
    )
  }

  // 确保"推荐"标签在最左边
  const sortedFilterTags = [...doctorFilterTags].sort((a, b) => {
    if (a === '推荐') return -1
    if (b === '推荐') return 1
    return 0
  })

  return (
    <>
      {/* 筛选标签 */}
      <ScrollView 
        className='filter-tags' 
        scrollX
        showScrollbar={false}
        enhanced
      >
        {sortedFilterTags.map((tag, index) => (
          <View 
            key={index} 
            className={`filter-tag ${activeFilter === tag ? 'active' : ''}`}
            onClick={() => onFilterChange(tag)}
          >
            <Text>{tag}</Text>
          </View>
        ))}
      </ScrollView>

      {/* 医生列表 */}
      <ScrollView className='doctor-list' scrollY>
        <View className='doctor-grid'>
          {currentDoctors.length > 0 ? (
            currentDoctors.map((doctor) => (
              <DoctorCard 
                key={doctor.id || doctor._id} 
                doctor={doctor} 
                onClick={onDoctorClick}
              />
            ))
          ) : (
            <View className='empty-state'>
              <Text>暂无{activeFilter}分类的医生</Text>
              <Text style={{fontSize: '12px', color: '#999', marginTop: '8px'}}>
                可用分类: {doctorFilterTags.join(', ')}
              </Text>
            </View>
          )}
        </View>
      </ScrollView>
    </>
  )
}

export default DoctorList
